<template>
  <div style="padding:30px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="角色名">
        <el-input v-model="form.roleName" placeholder="角色名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-col :span="100"><el-button type="success" @click="adds()">新增</el-button></el-col>
      </el-form-item>
    </el-form>

    <el-row type="flex" class="row-bg">
      <el-col :span="1">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">


          <el-table ref="filterTable" :data="tableData" height="250" border style="height: 100%">
              <el-table-column prop="roleId" label="编号" width="width: 20%">
              </el-table-column>
              <el-table-column prop="roleName" label="角色名" width="width: 20%">
              </el-table-column>
              <el-table-column prop="roleDescription" width="width: 20%" label="描述">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button @click="setDepot(scope.row)" type="success" size="small">编辑</el-button>
                  <el-button @click="setModule(scope.row)" type="success" size="mini">分配权限</el-button>
                  <el-button @click="delDepot(scope.row)" type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          <div class="block">
            <el-tag class="demonstration">调整每页显示条数</el-tag>
            <el-pagination
             background layout="sizes,prev, pager, next"
             :total="count"
             :page-sizes="[3, 4, 5, 6]"
              :page-size="3"
               @current-change="getAllByLimit"
                @size-change="handleSizeChange">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

            <el-dialog title="新增角色" :visible.sync="addshow">
            <el-form :model="addform">
                <el-form-item label="角色名">
                  <el-input v-model="addform.roleName" placeholder="角色名"></el-input>
                </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="addform.roleDescription" placeholder="角色描述"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pushs()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>

            <el-dialog title="修改角色" :visible.sync="setshow">
            <el-form :model="setform">
                <el-form-item label="角色名">
                  <el-input v-model="setform.roleName" placeholder="角色名"></el-input>
                </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="setform.roleDescription" placeholder="描述"></el-input>
              </el-form-item>
               <el-input v-model="setform.roleId" type="hidden"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addpush()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>
            <el-dialog title="权限分配" :visible.sync="setModuleRole">
              <div style="width: 300px;height: 400px">
                <div class="custom-tree-container">
                  <div class="block">
                    <el-tree
                      :data="data"
                      show-checkbox
                      :default-expanded-keys="open"
                      :default-checked-keys="open"
                       node-key="id"
                       ref="atree"
                      :expand-on-click-node="false"
                      :props="defaultProps">
                    </el-tree>
                  </div>
                </div>
             </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="put()">提 交</el-button>
                  <el-button  @click="err()">取 消</el-button>
              </div>
            </el-dialog>
  </div>
</template>

<script>
  import {roleAll as getAll,set,del,add} from '@/api/role'
  import {getAll as getAllModule} from '@/api/module'
  import {getModuleByRole , batchSave} from '@/api/modulerole'

  export default {
    data() {
      return {
        form: {
          roleName: ''
        },
        data: {},
        datadiv: '',
        defaultProps: {
          id : 'id',
          children: 'children',
          label: 'label',
          href : 'href',
          icon : 'icon',
          isParentNode : 'isParentNode',
          isChildNode : 'isChildNode',
          parentId : 'parentId'
        },
        page: 1,
        limit: 3,
        tableData: [],
        count: 4,
        addshow:false,
        addform: {
          roleName: '',
          roleDescription: ''
        },
        setshow:false,
        setModuleRole:false,
        setform: {
          roleId:'',
          roleName: '',
          roleDescription:''
        },
        open: [],
        roleId:''
      }
    },
    created() {
      this.getAllByLimit(1);
      this.getAllModuleRole();

    },
    methods: {
      //分页查询所有
      getAllByLimit(val) { // 修改当前页所触发的函数
        return new Promise((resolve, reject) => {
          getAll({'limit': this.limit,'page': val}).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //当limit修改时分页查询所有
      handleSizeChange(val){
          return new Promise((resolve, reject) => {
            getAll({'limit': val,'page': 1}).then(response => {
              const {data,count} = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
      },
      //模糊查询表单提交
      onSubmit() {
        return new Promise((resolve, reject) => {
          getAll({
            'limit': this.limit,
            'page': this.page,
            'name': this.form.roleName
          }).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //添加按钮事件
       adds(){
            this.addshow=true;
      },
     //取消让弹框隐藏
      err(){
            this.addshow=false;
            this.setshow=false;
            this.setModuleRole=false;
      },
      setDepot(row){
          this.setshow=true;
          this.setform=row;
          this.setform.stare=row.standby1;
      },
      //初始化分配权限界面
      setModule(row){
        this.setModuleRole=true;
        this.$nextTick(function () {
                //Dom更新完毕
                this.$refs.atree.setCheckedKeys([]);
              });
        return new Promise((resolve, reject) => {
          getModuleByRole({"roleId":row.roleId}).then(response => {
            const {data} = response
            this.open = data;
            this.roleId=row.roleId;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      getAllModuleRole(){
        return new Promise((resolve, reject) => {
          getAllModule({}).then(response => {
            const {data} = response
            this.data = data;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //提交添加
      pushs() {
        return new Promise((resolve, reject) => {
          add({
            'roleName': this.addform.roleName,
            'roleDescription':this.addform.roleDescription,
          }).then(response => {
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success'
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error',
                    onClose:  () =>{
                      this.err();
                    }

               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //提交修改
      addpush() {
        return new Promise((resolve, reject) => {
          set({
            'roleId' : this.setform.roleId,
            'roleName': this.setform.roleName,
            'roleDescription' :this.setform.roleDescription
          }).then(response => {
            console.log(response);
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                onClose:  () =>{
                  this.err();
                }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //提交分配权限
      put() {
         return new Promise((resolve, reject) => {
          batchSave({
            'typeName': this.roleId,
            'namelist':this.$refs.atree.getCheckedKeys()
          }).then(response => {
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                 onClose:  () =>{
                   this.err();
                 }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button type="text" icon="el-icon-plus" on-click={ () => this.append(data) }> </el-button>
              <el-button type="text" icon="el-icon-edit" on-click={ () => this.update(data) }> </el-button>
              <el-button type="text" icon="el-icon-delete" on-click={ () => this.remove(node, data) }></el-button>
            </span>
          </span>);
      },
      delDepot(row) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(response => {
           return new Promise((resolve, reject) => {
             del({'roleId': row.roleId}).then(response => {
              if(response.data){
                this.$message({
                          message: response.msg,
                          type: 'success',
                          onClose:  () =>{
                            location.reload();
                          }
                        });
              }else{
                 this.$message.error(response.msg);
              }
               resolve()
             }).catch(error => {
               reject(error)
             })
           })
            resolve()
          }).catch(error => {
            reject(error)
          })
      }
    }
  }
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
